<template>
  <div>
    <baidu-map
      :center="center"
      :zoom="15"
      class="map"
      :scroll-wheel-zoom="true"
    >
      <bm-view class="map1"></bm-view>
      <bm-polyline
        :path="polylinePath1"
        stroke-color="blue"
        :stroke-opacity="1"
        :stroke-weight="5"
        :editing="false"
      ></bm-polyline>
      <div>
        <bm-label
          v-for="(v, k) in polylinePaths"
          :key="k"
          content="起"
          :position="{ lng: v.lng, lat: v.lat }"
          :labelStyle="style"
          :offset="{ width: -15, height: -15 }"
        />
      </div>
      <div>
        <bm-label
          v-for="(v, k) in polylinePathr"
          :key="k"
          content="终"
          :position="{ lng: v.lng, lat: v.lat }"
          :labelStyle="style"
          :offset="{ width: -15, height: -15 }"
        />
      </div>

      <bm-label
        v-for="(v, k) in polylinePath"
        :key="k"
        :content="k + 1 + ''"
        :position="{ lng: v.lng, lat: v.lat }"
        :labelStyle="style"
        :offset="{ width: -15, height: -15 }"
      />
    </baidu-map>
    <el-button @click="buttonclick">返回</el-button>
  </div>
</template>
<script>
import { ViewMapAPI } from "@/request/api";
export default {
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      polylinePaths: [],
      polylinePathr: [],
      polylinePath: [],
      polylinePath1: [],
      style: {
        color: "white",
        FontWeight: "700",
        backgroundColor: "#F25C05",
        fontSize: "15px",
        borderRadius: "100px",
        height: "25px",
        width: "25px",
        border: "2px solid white",
        textAlign: "center",
        lineHeight: "24px",
      },
      numberValidateForm: {
        sender: "",
        senderName: "",
        senderAddress: "",
        recipient: "",
        recipientName: "",
        recipientAddress: "",
        logisticsCompany: "",
        senderArea: "",
        recipientArea: "",
      },
    };
  },
  methods: {
    buttonclick() {
      this.$router.push({
        path: this.routers,
      });
    },
  },
  created() {
    this.routers = this.$route.query.routers;
    this.numberValidateForm=this.$route.query.numberValidateForm
ViewMapAPI({
        params: {
          orderNumber: this.numberValidateForm.orderNumber,
        },
      }).then((res) => {
        this.polylinePath = res.data.data.arrayList;
        console.log(this.res);
        this.polylinePaths = this.polylinePath.slice(0, 1);

        this.polylinePathr = this.polylinePath.slice(
          this.polylinePath.length - 1,
          this.polylinePath.length
        );
        console.log(this.polylinePath);
        this.center = this.polylinePath[this.polylinePath.length - 2];
        if (res.data.data.state == 1) {
          this.polylinePath1 = this.polylinePath.slice(
            0,
            this.polylinePath.length - 1
          );
        } else {
          this.polylinePath1 = this.polylinePath;
        }
        this.polylinePath = this.polylinePath.slice(
          1,
          this.polylinePath.length - 1
        );
      });
  },
};
</script>
<style>
.map {
  width: 100%;
  height: 400px;
}
</style>